<template>
	<view>
		<uni-search-bar :focus="true" @input="input" v-model="searchValue" placeholder="请输入搜索内容">
		</uni-search-bar>

		<uni-list>
			<uni-list-item v-for="(item,index) in searchList" :key="index" :title="item.title" note="" showArrow
				thumb="/static/image/list_health.png" thumb-size="lg" rightText="" clickable @click="itemClick(item)" />
		</uni-list>

	</view>
</template>

<script>
	const librarys = require('@/static/library.json')
	export default {
		data() {
			return {
				searchValue: '',
				libraryList: [],
				searchList: []
			}
		},
		created() {
			this.libraryList = librarys
		},
		onShow() {
			// console.log('onShow')
			// this.searchValue = ''
			// 	this.searchList = []
		},
		methods: {
			input(res) {
				this.searchList = []
				if(res=='') return
				for (var i = 0; i < this.libraryList.length; i++) {
					if (this.libraryList[i].title.indexOf(res) > -1) {
						this.searchList.push({
							title: this.libraryList[i].title
						})
					}
				}

			},
			itemClick(item) {
				console.log(item)
				uni.navigateTo({
					url: `detail/detail?title=${item.title}`
				})
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style lang="scss">
	.uni-searchbar {
		background-color: white;
	}

	img {
		width: 200px !important;
		height: 200px !important;
	}

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}
</style>